import React from 'react'
import axios from "axios"
import {useState,useEffect} from "react" // 模拟了一个类组件得状态
// 在函数组件里没有生命周期这个概念，useEffect可以模拟出componetDidMountd这个生命周期
// 在react 16.8之前，函数式组件，没有自己得状态，只能做单纯得展示性组件
// 在函数式组件里就没有this
// 在react16.8之后，推出了hooks ，钩子函数就是在某些时间内自动执行得函数
function Fun() {
  let name1 = "zhaohzih"
  console.log(0);
  let [name,setName] = useState("zhangsan")
  let [arr,setArr] = useState([])
  let fun = (data)=>{
      setName(data)
      name1 = "kebi"
  }
//   useEffect(() => {
//     if (arr ===0) {
//         console.log("222222")
//         return
//     }
//     console.log(arr)
// },[arr])
useEffect(()=>{
   console.log(2);
   axios.get("/list").then(res=>{
       console.log(res.data)
       setArr(res.data.list)
       console.log(arr)
    //    setTimeout(()=>{ console.log(arr,222)},200)
     return ()=>{ // return 得这个函数就是组件卸载得构造函数，模拟componentWillUnmount
          console.log("我被卸载了")
     }
   })
},[]) // useEffect的执行与否是根据第二个参数，即[]里的东西有没有改变来执行得
// 当第二个参数为空数组的时候，就模拟出了componetDidMountd
  return (
    <div>
        <hr></hr>
        <span>{name1}</span>
        <span>{name}</span>
        <button onClick={()=>{setName("LIS")}}>点击我修改name得值</button>
        <button onClick={()=>{fun("wangwu")}}>点击我修改name得值</button>
        {
            arr&&arr.length?arr.map((item,index)=>{
                return <h5 key={index}>{item.name}</h5>
            }):"暂无数据"
            // 暂无数据叫处理边界情况
        }
        
    </div>
 
  )
}
export default Fun
